<template>
  <div class="ant-col ant-col-24" style="padding:15px 30px;">
    <div class="ant-row ant-row-space-between ant-row-middle"
         style="border-bottom: 1px solid rgb(240, 240, 240); height: 60px; padding-bottom: 10px; row-gap: 0px;"
    >
      <div class="ant-col ant-col-12" style="">
        <div class="article-status">
          <div @click="handleChangeTab(0)"  :class="[tabIndex==0?'is-active':'']">收藏课程 <span>(2)</span></div>
          <div @click="handleChangeTab(1)"  :class="[tabIndex==1?'is-active':'']">收藏文章 <span>(2)</span></div>
        </div>
      </div>
    </div>
    <div class="ant-row" style="row-gap: 0px;" type="flex">
      <div class="ant-col ant-col-24 articles" style="">
        <div class="">
          <div class="ant-row ant-row-start ant-row-middle" style="margin-bottom: 20px; row-gap: 0px;" type="flex"
          >
            <div style="display:flex;justify-content:space-between;width:100%;">
              <div style="width:70%;"><a target="_blank" href="/a/edit/er8DVIcIXP"
              >
                <div style="height:30px;"><h4><span>WSL2 的 2.0 更新彻底解决网络问题</span>
                </h4></div>
                <div class="desc"><span>2023/11/19</span><span>1次阅读</span>
                </div>
              </a></div>
              <div style="display:flex;align-items:center;cursor:pointer;">
                <div class="options">
                  <nuxt-link>
                    <n-button size="small">
                      <n-icon><ColorWandOutline></ColorWandOutline></n-icon>
                      <span class="px-1">编辑</span>
                    </n-button>
                  </nuxt-link>
                  <nuxt-link>
                    <n-button size="small">
                      <n-icon><EyeOutline></EyeOutline></n-icon>
                      <span class="px-1">预览</span>
                    </n-button>
                  </nuxt-link>
                  <nuxt-link>
                    <n-button size="small">
                      <n-icon><close></close></n-icon>
                      <span class="px-1">删除</span>
                    </n-button>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
          <div class="ant-row ant-row-start ant-row-middle" style="margin-bottom: 20px; row-gap: 0px;" type="flex"
          >
            <div style="display:flex;justify-content:space-between;width:100%;">
              <div style="width:70%;"><a target="_blank" href="/a/edit/epfosIZeBD"
              >
                <div style="height:30px;"><h4><span>Bun入门指南（新手必看）</span>
                </h4></div>
                <div class="desc"><span>2023/11/16</span><span>25次阅读</span>
                </div>
              </a></div>
              <div style="display:flex;align-items:center;cursor:pointer;">
                <div class="options">
                  <nuxt-link>
                    <n-button size="small">
                      <n-icon><ColorWandOutline></ColorWandOutline></n-icon>
                      <span class="px-1">编辑</span>
                    </n-button>
                  </nuxt-link>
                  <nuxt-link>
                    <n-button size="small">
                      <n-icon><EyeOutline></EyeOutline></n-icon>
                      <span class="px-1">预览</span>
                    </n-button>
                  </nuxt-link>
                  <nuxt-link>
                    <n-button size="small">
                      <n-icon><close></close></n-icon>
                      <span class="px-1">删除</span>
                    </n-button>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const tabIndex = ref(0)
const handleChangeTab = (index) => {
  tabIndex.value = index
}
</script>
<style scoped>
.creator-article {
  background: var(--bg-color);
  min-height: 70vh
}

.article-status, .article-status div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.article-status div {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: .125rem solid transparent;
  color: var(--f-color-8);
  cursor: pointer;
  font-size:14px;
  height: 3.625rem;
  margin-right: 1.6625rem
}

.article-status .is-active {
  border-bottom: .125rem solid var(--el-color-primary);
  font-weight: 700;
  color:var(--el-color-primary);
}

.article-status span {
  margin-left: .3125rem
}

.articles {
  background: var(--bg-color);
  padding: 1.25rem 0;
  width: 100%
}

.articles .desc, .articles h4 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis
}

.articles .desc {
  color: var(--f-color-3);
  font-size: .8125rem;
  line-height: 1.375rem;
  margin-top: .5rem
}

.articles .desc span {
  margin-right: .625rem
}

.options .n-button{margin-left: 10px}
.article-status .is-active {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  border-bottom: .125rem solid var(--el-color-primary);
  color:var(--el-color-primary);
}

</style>